<template>
    <div class="table">
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>用户支付</el-breadcrumb-item>
            </el-breadcrumb>
        </div>

        <el-form :inline="true" :model="search" class="demo-form-inline">
            <el-form-item label="订单号">
                <el-input v-model="search.orderNo" placeholder="订单号"></el-input>
            </el-form-item>
            <el-form-item label="用户名">
                <el-input v-model="search.userName" placeholder="用户名"></el-input>

            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSearch()">查询</el-button>
            </el-form-item>
        </el-form>

        <el-table :data="tableData" border style="width: 100%">
            <el-table-column prop="money" label="金额" sortable width="130">
            </el-table-column>
            <el-table-column prop="user.nickName" label="用户名" sortable width="130">
            </el-table-column>
            <el-table-column prop="game.gameName" label="赛事名称" sortable width="130">
            </el-table-column>
            <el-table-column prop="attendRecord.player.realName" label="参赛选手" sortable width="130">
            </el-table-column>
            <el-table-column prop="orderNo" label="订单号" sortable width="130">
            </el-table-column>

            

        </el-table>
        <div class="pagination">
            <el-pagination
                    @current-change="handleCurrentChange"
                    layout="total,prev, pager, next"
                    :current-page.sync="currentPage"
                    :total="total">
            </el-pagination>
        </div>

        <!--预设区-->
        <!--<div>-->
        <!--<el-dialog title="新增管理员" v-model="formVisible">-->
            <!--<el-form :model="admin">-->


                <!--<el-form-item  label="管理员账号">-->
                    <!--<el-input v-model="admin.adminName" auto-complete="off"></el-input>-->
                <!--</el-form-item>-->
                <!--<el-form-item  label="管理员密码">-->
                    <!--<el-input v-model="admin.adminPassWord" auto-complete="off"></el-input>-->
                <!--</el-form-item>-->




            <!--</el-form>-->
            <!--<div slot="footer" class="dialog-footer">-->
                <!--<el-button @click="formVisible = false">取 消</el-button>-->
                <!--<el-button type="primary" @click="add()">确 定</el-button>-->
            <!--</div>-->
        <!--</el-dialog>-->

    <!--</div>-->
    </div>
</template>

<script>
    import { Loading } from 'element-ui';
    export default {
        data() {
            return {
                admin:{

                    adminName:"",
                    adminPassWord:"",
                    available:true,
                },
                total:0,
                currentPage:1,
                tableData: [],
                formVisible:false,
                search: {
                    userName: '',
                    orderNo: ''
                }

            }
        },
        methods: {
            handleCurrentChange(currentPage){
                let self = this;
                self.currentPage = currentPage;
                self.getData();

            },

            onSearch(){
                let self = this;
                self.currentPage = 1;
                self.$req.get(self.$api("Order")+"search?userName="+encodeURI(self.search.userName)+"&orderNo="+self.search.orderNo+"&page="+self.currentPage,self,function(res){

                    self.tableData = res.data.data.content;
                    self.total = res.data.data.totalElements;


                },self.search,true);
            },

            getData(){
                let self = this;
//                let params = {
//                    page:self.currentPage
//                };


//                console.log("page"+params.page);

                self.$req.pget(self.$api("Order")+"orderlist?page="+self.currentPage,self,function(res){

                    console.log(res)
                    self.tableData = res.data.data.content;

                    self.total = res.data.data.totalElements;

                },null,true)
            },


           



        },
        mounted:function(){
            this.getData();
        }
    }
</script>